<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/base.js"></script>
</head>
<body>
        
    <!-- 图片介绍栏 -->
	<div class="pic-pro">
            <div class="pic-center ">
                <div class="picture">
                    <ul class='ulPic'>
                        <li><a href="#"><img src="./images/1" alt=""></a></li>
                        <li><a href="#"><img src="./images/2" alt=""></a></li>
                        <li><a href="#"><img src="./images/3" alt=""></a></li>
                        <li><a href="#"><img src="./images/4" alt=""></a></li>
                        <li><a href="#"><img src="./images/5" alt=""></a></li>
                        <li><a href="#"><img src="./images/6" alt=""></a></li>
                        <li><a href="#"><img src="./images/7" alt=""></a></li>
                        <li><a href="#"><img src="./images/8" alt=""></a></li>
                        <li><a href="#"><img src="./images/9" alt=""></a></li>
                    </ul>
                    <ol class="circle">
                        <li class='current'></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                </div>
                <div class="download">
                    <a href="#"></a>
                    <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                </div>
                <span class="arrow-left"></span>
                <span class="arrow-right"></span>
            </div>
        </div>
    
        <!-- 歌曲推荐 -->
        <div class="produce">
            <div class="pro-center">
                <!-- 左边 -->
                <div class="pro-left">
                    <!-- 热门推荐 -->
                    <div class="hot-pro">
                            <div class="title">
                                <a href="#" class="red"><i></i>热门推荐</a>
                                <ul class='hot-list'>
                                    <li><a href="#">华语</a><span>|</span></li>
                                    <li><a href="#">流行</a><span>|</span></li>
                                    <li><a href="#">摇滚</a><span>|</span></li>
                                    <li><a href="#">民谣</a><span>|</span></li>
                                    <li><a href="#">电子</a></li>
                                </ul>
                                <span class="more"><a  href="#">更多</a><i></i></span>
                            </div>
                            <div class="hot-content"> 
                                <ul>
                                    <li>
                                        <div><img src="./images/2.1.jpg" alt=""></div>
                                        <a href="#">『日摇』烟火盛放的清新夏夜</a>
                                    </li>
                                    <li>
                                           <div><img src="./images/2.2.jpg" alt=""></div>
                                           <a href="#">这些百大DJ们的“小号”你知道吗？</a>
                                    </li>
                                    <li>
                                           <div><img src="./images/2.3.jpg" alt=""></div>
                                           <a href="#">朴树、许巍、李健、郑钧、老狼、赵雷</a>
                                    </li>
                                    <li>
                                           <div><img src="./images/2.4.jpg" alt=""></div>
                                           <a href="#">11、谢谢你，一直都在</a>
                                    </li>
                                    <li>
                                           <div><img src="./images/2.5.jpg" alt=""></div>
                                           <a href="#">ᴇᴀ⁷最棒的抖腿车载收录</a>
                                    </li>
                                    <li>
                                           <div><img src="./images/2.6.jpg" alt=""></div>
                                           <a href="#">关于成年人的压力</a>
                                    </li>
                                    <li>
                                           <div><img src="./images/2.7.jpg" alt=""></div>
                                           <a href="#">经典老歌，久听不厌</a>
                                    </li>
                                    <li>
                                           <div><img src="./images/2.8.jpg" alt=""></div>
                                           <a href="#">有些人，你早该拉黑了。</a>
                                    </li>
                                </ul>
                            </div>
                    </div>
                    <!-- 新碟上架 -->
                    <div class="new-pro">
                        <div class="title">
                            <a href="#" class="red"><i></i>新碟上架</a>
                            <span class="more"><a  href="#">更多</a><i></i></span>
                        </div>
                        <div class="new-content">
                                <ul>
                                    <li>
                                       <a href="#"><img src="./images/3.1.jpg" alt=""></a> 
                                       <p><a href="#">我们在夏枝繁茂...</a></p>
                                       <p><a href="#">钱正昊</a></p>
                                    </li>
                                    <li>
                                       <a href="#"><img src="./images/3.2.jpg" alt=""></a> 
                                       <p><a href="#">Lights/Boy With...</a></p>
                                       <p><a href="#">BTS (防弹少年团)</a></p>
                                   </li>
                                    <li>
                                       <a href="#"><img src="./images/3.3.jpg" alt=""></a>
                                       <p><a href="#">Uh-Oh</a></p>
                                       <p><a href="#">(G)I-DLE</a></p>
                                       
                                    </li>
                                    <li>
                                       <a href="#"><img src="./images/3.4.jpg" alt=""></a> 
                                       <p><a href="#">Trust Myself</a></p>
                                       <p><a href="#">袁娅维</a>/<a href="#">Gallant</a> </p>
                                    </li>
                                    <li>
                                       <a href="#"><img src="./images/3.5.jpg" alt=""></a> 
                                       <p><a href="#">光之海(Live合唱版)</a></p>
                                       <p><a href="#">A-Lin</a>/<a href="#">王晰</a>/...</p>
                                    </li>
                                </ul>
                            </div>
                    </div>
                    <!-- 榜单 -->
                    <div class="rank-pro">
                            <div class="title">
                                <a href="#" class="red"><i></i>榜单</a>
                                <span class="more"><a  href="#">更多</a><i></i></span>
                            </div>
                            <div class="rank-content">
                                <dl>
                                    <dt>
                                        <div class="dt-left"><img src="./images/4.1.jpg" ></div>
                                        <div class="dt-right"><a href="#">云音乐飙升榜</a></div>
                                    </dt>
                                    <dd>
                                        <ol>
                                            <li>
                                                <span>1</span>
                                                <a href="#">飞蛾扑火</a>
                                            </li>
                                            <li>
                                                <span>2</span>
                                                <a href="#">Beautiful Journey</a>
                                            </li>
                                            <li>
                                                <span>3</span>
                                                <a href="#">无名之辈</a>
                                            </li>
                                            <li>
                                                <span>4</span>
                                                <a href="#">你也没有错</a></li>
                                            <li>
                                                <span>5</span>
                                                <a href="#">Never fade lotus</a>
                                            </li>
                                            <li>
                                                <span>6</span>
                                                <a href="#">攀登(Live)</a>
                                            </li>
                                            <li>
                                                <span>7</span>
                                                <a href="#">These Are The Times</a></li>
                                            <li>
                                                <span>8</span>
                                                <a href="#">Lords没在怕</a></li>
                                            <li>
                                                <span>9</span>
                                                <a href="#">你走以后1.0</a></li>
                                            <li>
                                                <span>10</span>
                                                <a href="#">给未来</a>
                                            </li>
                                            <li><a href="#">查看全部></a> </li>
                                        </ol>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <div class="dt-left"><img src="./images/4.2.jpg" ></div>
                                        <div class="dt-right"><a href="#">云音乐新歌榜</a></div>
                                    </dt>
                                    <dd>
                                            <ol>
                                                    <li>
                                                        <span>1</span>
                                                        <a href="#">慢半拍</a>
                                                    </li>
                                                    <li>
                                                        <span>2</span>
                                                        <a href="#">无名之辈</a>
                                                    </li>
                                                    <li>
                                                        <span>3</span>
                                                        <a href="#">得不到你</a>
                                                    </li>
                                                    <li>
                                                        <span>4</span>
                                                        <a href="#">牛奶面包</a></li>
                                                    <li>
                                                        <span>5</span>
                                                        <a href="#">Couldn't Leave</a>
                                                    </li>
                                                    <li>
                                                        <span>6</span>
                                                        <a href="#">飞蛾扑火</a>
                                                    </li>
                                                    <li>
                                                        <span>7</span>
                                                        <a href="#">给未来</a></li>
                                                    <li>
                                                        <span>8</span>
                                                        <a href="#">Follow me(Live)</a></li>
                                                    <li>
                                                        <span>9</span>
                                                        <a href="#">木偶人</a></li>
                                                    <li>
                                                        <span>10</span>
                                                        <a href="#">bad guy-with Justin Bieber</a>
                                                    </li>
                                                    <li><a href="#">查看全部></a> </li>
                                            </ol>    
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <div class="dt-left"><img src="./images/4.4.jpg" ></div>
                                        <div class="dt-right"><a href="#">网易原创歌曲榜</a></div>
                                    </dt>
                                    <dd>
                                            <ol>
                                                    <li>
                                                        <span>1</span>
                                                        <a href="#">追风</a>
                                                    </li>
                                                    <li>
                                                        <span>2</span>
                                                        <a href="#">人类之后</a>
                                                    </li>
                                                    <li>
                                                        <span>3</span>
                                                        <a href="#">单线告别</a>
                                                    </li>
                                                    <li>
                                                        <span>4</span>
                                                        <a href="#">荒唐戏</a></li>
                                                    <li>
                                                        <span>5</span>
                                                        <a href="#">海底捞月</a>
                                                    </li>
                                                    <li>
                                                        <span>6</span>
                                                        <a href="#">夏日限定</a>
                                                    </li>
                                                    <li>
                                                        <span>7</span>
                                                        <a href="#">麋鹿</a></li>
                                                    <li>
                                                        <span>8</span>
                                                        <a href="#">下雨的天气(Miss you)</a></li>
                                                    <li>
                                                        <span>9</span>
                                                        <a href="#">那年</a></li>
                                                    <li>
                                                        <span>10</span>
                                                        <a href="#">葡萄</a>
                                                    </li>
                                                    <li><a href="#">查看全部></a></li>
                                            </ol>     
                                    </dd>
                                </dl>             
                            </div>  
                    </div>
                </div>
                <!-- 右边 -->
                <div class="pro-right">
                    <div class="user-load">
                        <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                        <a href="#">用户登录</a>
                    </div>
                    <!-- 入驻歌手 -->
                    <div class="singer">
                        <div class="s-title">
                            <p>入驻歌手</p>
                            <a href="#">查看全部></a>
                        </div>
                        <div class="singer-pro">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="s-pic "><img src="./images/s1.jpg" alt=""> </div>
                                        <div class="s-mes ">
                                            <span>张惠妹aMEI</span>
                                            <p>台湾歌手张惠妹</p>
                                        </div>
                                    </a>
                                </li>
                                
                                <li>
                                        <a href="#">
                                                <div class="s-pic "><img src="./images/s2.jpg" alt=""> </div>
                                                <div class="s-mes ">
                                                    <span>Fine乐团</span>
                                                    <p>独立音乐人</p>
                                                </div>
                                            </a>
                                </li>
                                <li>
                                        <a href="#">
                                                <div class="s-pic "><img src="./images/s3.jpg" alt=""> </div>
                                                <div class="s-mes ">
                                                    <span>万晓利</span>
                                                    <p>民谣歌手、中国现..</p>
                                                </div>
                                            </a>
                                </li>
                                <li>
                                        <a href="#">
                                                <div class="s-pic "><img src="./images/s4.jpg" alt=""> </div>
                                                <div class="s-mes ">
                                                    <span>音乐人赵雷</span>
                                                    <p>民谣歌手</p>
                                                </div>
                                            </a>
                                </li>
                                <li>
                                        <a href="#">
                                                <div class="s-pic "><img src="./images/s5.jpg" alt=""> </div>
                                                <div class="s-mes ">
                                                    <span>王三博</span>
                                                    <p>音乐人</p>
                                                </div>
                                            </a>
                                </li>
                            </ul>
                            <div class="application">
                                <a href="#">申请成为网易音乐人</a>
                            </div>
                        </div>
                    </div>
                    <!-- 热门主播 -->
                    <div class="zhubo">
                            <div class="s-title">
                                    <p>热门主播</p>
                            </div>
                            <div class="z-content">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="z-pic"><img src="./images/z1.jpg" ></div>
                                            <div class="z-mes">
                                                <span>陈立<i></i></span>
                                                <p>心理学家、美食家陈立教授</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                            <a href="#">
                                                    <div class="z-pic"><img src="./images/z2.jpg" ></div>
                                                    <div class="z-mes">
                                                        <span>DJ艳秋<i></i></span>
                                                        <p>著名音乐节目主持人</p>
                                                    </div>
                                                </a>
                                    </li>
                                    <li>
                                            <a href="#">
                                                    <div class="z-pic"><img src="./images/z3.jpg" ></div>
                                                    <div class="z-mes">
                                                        <span>国家大剧院古典音乐频道<i></i></span>
                                                        <p>国家大剧院古典音乐官方</p>
                                                    </div>
                                                </a>
                                    </li>
                                    <li>
                                            <a href="#">
                                                    <div class="z-pic"><img src="./images/z4.jpg" ></div>
                                                    <div class="z-mes">
                                                        <span>谢谢收听<i></i></span>
                                                        <p>南京电台主持人王馨</p>
                                                    </div>
                                                </a>
                                    </li>
                                    <li>
                                            <a href="#">
                                                    <div class="z-pic"><img src="./images/z5.jpg" ></div>
                                                    <div class="z-mes">
                                                        <span>DJ晓苏<i></i></span>
                                                        <p>独立DJ，CRI环球旅游广播..</p>
                                                    </div>
                                                </a>
                                    </li>
                                </ul>
                            </div>
                    </div>
                </div>
            </div>
        </div>
        
</body>
<script>
        
        // 轮播图
        var box=document.getElementsByClassName("pic-pro")[0];
        var ulPic=box.getElementsByClassName("ulPic")[0];
        var picLis=ulPic.children;
        var newLi=picLis[0].cloneNode(true);
        var olCircle=box.getElementsByClassName("circle")[0];
        var circleLis=olCircle.children;
        ulPic.appendChild(newLi);
        var arrowLeft=box.getElementsByClassName("arrow-left")[0];
        var arrowRight=box.getElementsByClassName("arrow-right")[0];
        
        
        // 添加定时器
        var key=0;
        var square=0;
        var timer=null;
        timer=setInterval(autoPlay,4000);
        function autoPlay(){
            key++;
            square++;
            if(key>circleLis.length){
                key=1;
                ulPic.style.left=0;
            }
            animate(ulPic,-key*picLis[0].offsetWidth);
            square=square>circleLis.length-1?0:square;
            for(var i=0;i<circleLis.length;i++){
                circleLis[i].className='';
            }
            circleLis[square].className='current';
        }
        // 鼠标放在圆点上，轮播图片
        for(var i=0;i<circleLis.length;i++){
            circleLis[i].index=i;
            circleLis[i].addEventListener("click",function(){
                for(var j=0;j<circleLis.length;j++){
                    circleLis[j].className='';
                }
                this.className='current';
                animate(ulPic,-this.index*picLis[0].offsetWidth);
                key=square=this.index;
            })
            circleLis[i].addEventListener("mouseover",function(){
                for(var j=0;j<circleLis.length;j++){
                    circleLis[j].className='';
                }
                circleLis[square].className='current';
                this.className='current';
            })
        }
        // 鼠标移开开启定时器，鼠标放上去开启定时器
        box.onmouseover=function(){
            clearInterval(timer);
        }
        box.onmouseout=function(){
            timer=setInterval(autoPlay,3000);
        }
        // 左右按钮点击
        arrowLeft.addEventListener("click",function(){
            key--;
            square--;
            if(key<0){
                key=circleLis.length-1;
                ulPic.style.left=-circleLis.length*picLis[0].offsetWidth+"px";
            }
            animate(ulPic,-key*picLis[0].offsetWidth);
            if(square<0){
                square=circleLis.length-1;
            }
            for(var i=0;i<circleLis.length;i++){
                circleLis[i].className='';
            }
            circleLis[square].className='current';
        })
        arrowRight.addEventListener("click",function(){
            autoPlay();
        })
</script>
</html>